<template>
  <el-tabs v-model="activeName" @tab-click="handleTabsClick">

    <el-tab-pane label="动态参数" name="many">

      <!-- 按钮 -->
      <el-button-com text="添加参数" :isDisabled="isDisabledByArray" 
        @click.native="openAddOptionDialog" />
      <!-- 表格 -->
      <goods-option-table :GoodOptionData="autoListArray"></goods-option-table>
      

    </el-tab-pane>

    <el-tab-pane label="静态参数" name="only">

      <!-- 按钮 -->
      <el-button-com text="添加参数" :isDisabled="isDisabledByArray" 
      @click.native="openAddOptionDialog"/>

      <!-- 表格 -->
      <goods-option-table :GoodOptionData="staticListArray"></goods-option-table>

    </el-tab-pane>
    
    <!-- 添加参数dialog组件 -->
    <add-goods-option-dialog />
    <!-- 编辑dialog组件 -->
    <edit-good-option-dialog :activeName="activeName"/>

  </el-tabs>
</template>

<script>
// 组件
import ElButtonCom from '@/components/common/ElButtonCom';
import GoodsOptionTable from '@/views/Main/goods_manage/goods_options/GoodsOptionTable';
import AddGoodsOptionDialog from '@/views/Main/goods_manage/goods_options/AddGoodsOptionDialog';
import EditGoodOptionDialog from '@/views/Main/goods_manage/goods_options/EditGoodOptionDialog';

export default {
  data() {
    return {
      activeName: 'many'
    }
  },
  props: {
    selectorArray: Array,
    staticListArray: Array,
    autoListArray: Array
  },
  computed: {
    isDisabledByArray() { // 根据数组长度判断是否禁用按钮
      return this.selectorArray.length !== 3 ? true : false; 
    }
  },
  methods: {
    handleTabsClick(tab) { // 点击标签页切换触发
      this.activeName = tab.name;
      if (this.selectorArray.length !== 3) {
        return;
      }
      return this.$bus.$emit('getGoodOptionDataListRequest'); // 获取数据
    },
    openAddOptionDialog() { // 打开添加参数dialog
      this.$bus.$emit('openGoodOptionDialog', { 
        activeName: this.activeName, 
        idArr: this.selectorArray
      });
    }
  },
  components: {
    ElButtonCom,
    GoodsOptionTable,
    AddGoodsOptionDialog,
    EditGoodOptionDialog
  }
}
</script>

<style lang="scss" scoped>

</style>